<template>
  <el-dialog
    :title="pageType===0?'代理新增':'代理修改'"
    :visible.sync="dialogVisible"
    width="70%"
    destroy-on-close
    append-to-body
    custom-class="k-dilaog"
    @closed="closedEvent">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="协议类型">
        <el-select style="width: 180px" v-model="form.protocolType" placeholder="请选择" >
          <el-option
            v-for="dict in dict.type.xg_protocol_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="IP地址">
        <el-input style="width: 180px" v-model="form.ip" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="端口号">
        <el-input style="width: 180px" v-model="form.port" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="账户">
        <el-input style="width: 180px" v-model="form.account" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input style="width: 180px" v-model="form.pwd" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select style="width: 180px" v-model="form.status" placeholder="请选择">
          <el-option label="启用" value="0" />
          <el-option label="禁用" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="代理方式">
        <el-select style="width: 180px" v-model="form.proxyType" placeholder="请选择">
          <el-option label="API代理" value="1" />
          <el-option label="隧道代理" value="2" />
          <el-option label="IP代理" value="3" />
        </el-select>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
     <el-button @click="dialogVisible = false">取 消</el-button>
     <el-button type="primary" @click="clickSureBtn" :loading="loading">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import request from '@/utils/request';

export default {
  name:"delegateDialog",
  dicts: ['xg_protocol_type'],
  data(){
    return{
      initForm:{
        protocolType:null,
        ip:null,
        port:null,
        account:null,
        pwd:null,
      },
      dialogVisible:false,
      loading:false,
      form:{...this.initForm},
      callBack:null,
      pageType:0,//0新增1编辑
      id:null,
      options:[]
    }
  },
  methods:{
    openDiaolog(pageType,id,block){
      this.pageType = pageType;
      this.id = id;
      this.callBack = block;
      this.dialogVisible = true;
      if (this.pageType === 1){
        this.requestDataDetail();
      }
    },
    clickSureBtn(){
      if (!this.form.protocolType){
        this.$message.error("请选择协议类型");
        return
      }
      if (!this.form.ip){
        this.$message.error("请输入ip地址");
        return
      }
      if (!this.form.port){
        this.$message.error("请输入端口号");
        return
      }
      if (!this.form.proxyType){
        this.$message.error("请选择代理方式");
        return
      }
      if (this.pageType === 0){
        this.requestDataAdd();
      }else {
        this.requestDataEdit();
      }
    },
    closedEvent(){
      this.form = {...this.initForm};
    },
    //网络-查询
    requestDataDetail(){
      request({
        url:`/proxy_config/${this.id}`,
        method:'get',
        params: {},
      }).then(response =>{
        this.form = response.data;
      })
    },
    //网络-根据ID修改用户信息
    requestDataEdit(){
      this.loading = true;
      request({
        url:`/proxy_config`,
        method:'put',
        data: this.form,
      }).then(response =>{
        this.loading = false;
        this.callBack();
        this.$message.success(response.msg);
        this.dialogVisible = false;
      })
    },
    //网络-新增
    requestDataAdd(){
      this.loading = true;
      request({
        url:`/proxy_config`,
        method:'post',
        data: this.form,
      }).then(response =>{
        this.loading = false;
        this.callBack();
        this.$message.success(response.msg);
        this.dialogVisible = false;
      })
    },
    // system/dict/data/type/sys_user_sex
  }
}

</script>
